<template>
  <component
    :is="dialog ? 'el-dialog' : 'div'"
    title="渠道信息"
    :modelValue="modelValue"
    align-center
    width="936px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
  </component>
</template>
<script setup lang="jsx">
import { logisticsChannel } from '../../api'

const props = defineProps({
  modelValue: { type: Boolean, default: true },
  id: { type: [String, Number], default: '' },
  dialog: { type: Boolean, default: true },
})

const emit = defineEmits(['update:modelValue', 'close'])

const tableRef = ref()

watch(
  () => props.id,
  val => {
    if (!val) return
    tableRef.value?.commitProxy?.('query')
  }
)

const tableOptions = reactive({
  round: true,
  height: '400',
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: '物流商API名称', fixed: 'left', width: 50, field: 'a1' },
    { title: '物流商API标识', fixed: 'left', minWidth: 120, field: 'a2' },
    { title: '物流商渠道运输方式中文名', minWidth: 120, field: 'a3' },
    { title: '物流商渠道运输方式英文名', width: 120, field: 'a4' },
    { title: '运输方式代码', width: 120, field: 'a5' },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      list: 'data',
    },
    ajax: {
      query: () => {
        const { id = '' } = props || {}
        return logisticsChannel({
          id,
        })
      },
    },
  },
})

const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}
</script>
